<template>
  <el-card class="box-card card-chart h-100 d-flex flex-column" :body-style="{flex: 1}">
    <div slot="header" class="clearfix d-flex">
      <span class="header-index">{{index}}</span>
      <span class="col header-title">{{title}}</span>
      <el-button type="text" class="mr-3"  @click="$router.push({name: routerName})">查看详情</el-button>
    </div>
    <div class="wd-card-body" style="padding: 0;">
      <div ref="echarts" class="h-100 w-100"></div>
    </div>
  </el-card>
</template>

<script>
import interval from './interval'

export default {
  name: "piecharts",
  title: "通用饼图处理",
  mixins: [interval],
  data() {
    return {
      series: [
        { name: "已完成区县", value: 0 },
        { name: "未完成区县", value: 0 },
      ],
    };
  },
  props: {
    url: {
      type: String,
      default: ''
    },
    index: {
      type: String,
      default: '0'
    },
    title: {
      type: String,
      default: ''
    },
    routerName: {
      type: String
    },
    dataKey: {
      type: String
    },
    legend: {
      type: Array
    },
    nameFinish: {
      type: String,
      default: '已完成区县'
    },
    nameUnfinish: {
      type: String,
      default: '未完成区县'
    }
  },
  mounted () {
    this.series[0].name = this.nameFinish
    this.series[1].name = this.nameUnfinish
  },
  methods: {
    setData (datas) {
      this.series[0].value = datas[this.dataKey][0]
      this.series[1].value = datas[this.dataKey][1]
      this.setOption()
    },
    // 根据名字获取对应值
    getValue (name) {
      let val = 0
      this.series.forEach(item => {
        if (item.name === name) {
          val = item.value
        }
      });
      return val
    },
    setOption () {
      let that = this
      this.chart.setOption({
        color: ['#09BD1D', '#209CFF'],
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        legend: {
          type: "scroll",
          orient: "vertical",
          height: '80%',
          left: "38%",
          top: "center",
          itemWidth: 15,
          itemHeight: 15,
          bottom: 20,
          data: [this.nameFinish, this.nameUnfinish],
          textStyle: {
            fontSize: 16
          },
          selectedMode:false,//取消图例上点击事件
          formatter: function (name) {
            return name + ': ' + that.getValue(name) + ' (个)'
          }
   
        },
        series: [
          {
            name: "图斑占比",
            type: "pie",
            radius: "55%",
            center: ["20%", "50%"],
            data: this.series,
            label: {
              normal: {
                position: 'inner',
                formatter: (item) => {
                  return ''
                  // if (item.data.value) {
                  //   return item.data.value
                  // } else {
                  //   return ''
                  // }
                }
              },
            },
            // label: {
            //   //饼图图形上文本标签
            //   normal: {
            //     show: true,
            //     // position: "inner", //标签位置
            //     textStyle: {
            //       fontWeight: 300,
            //       fontSize: 16 //文字字体大小
            //     },
            //     formatter: "{d}%"
            //   }
            // },
            itemStyle: {
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)"
              }
            }
          }
        ]
      })
    }
  }
};
</script>